<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div class="root" id="root02">
        <h1>{{str}}</h1>
        <h1>{{this.str}}</h1>
        <h1>{{vm.str}}</h1>
    </div>
</body>
<script>
    // 注意重点：在Vue模板中可以直接使用Vue实例中的属性或方法（不需要使用this,不需要使用this)
    // 注意重点：模块中可以使用this(不建议），说明模块所处的环境上下文中的this指向的是Vue实例。
    // 挂载（Vue实例挂载）：指定Vue实例应用的范围（元素）
    const vm = new Vue({
        el: "#root02",
        // 将ID为root的元素作为Vue实例挂载的元素（挂载的元素自此可以称为Vue模板）
        // el:document.querySelector("#root"),

        // 将ID为root的元素作为Vue实例挂载的元素（挂载的元素自此可以称为Vue模板）
        // el:"#root",

        // 将class为root的元素作为Vue实例挂载的元素（ 不建议）
        // el:".root",

        // 将标签名字为div的元素作为Vue实例挂载的元素（ 不建议）
        // el:"div",

        // el:"body",// 不允许
        // el:"html",// 不允许
        data:{
            str:"我现在开始学习Vue,第一步要进行挂载",
            vm:{
                str:"vm"
            }
        }
    })
</script>
</html>